<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>文章列表</title>
    <link rel="stylesheet" href="./libs/bootstrap/css/bootstrap.min.css" />
    <link rel="stylesheet" href="css/reset.css" />
    <link rel="stylesheet" href="css/iconfont.css" />
    <link rel="stylesheet" href="css/main.css" />
    <script src="./libs/jquery-1.12.4.min.js"></script>
    <script src="./libs/bootstrap/js/bootstrap.min.js"></script>
    <!-- 引入模板引擎js文件 -->
    <script src="./libs/template-web.js"></script>
  </head>

  <body>
    <div class="container-fluid">
      <div class="common_title">
        文章类别管理
      </div>
      <div class="container-fluid common_con">
        <table
          class="table table-striped table-bordered table-hover mp20 category_table"
        >
          <thead>
            <tr>
              <th>名称</th>
              <th>Slug</th>
              <th class="text-center" width="100">操作</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>奇趣事</td>
              <td>funny</td>
              <td class="text-center">
                <a
                  href="javascript:void(0)"
                  data-toggle="modal"
                  class=" btn btn-info btn-xs"
                >
                  编辑
                </a>
                <a href="javascript:void(0)" class="btn btn-danger btn-xs"
                  >删除</a
                >
              </td>
            </tr>
          </tbody>
          <tfoot>
            <tr>
              <td colspan="3" class="text-center">
                <a
                  href="javascript:void(0)"
                  class="btn btn-success"
                  id="xinzengfenlei"
                  data-toggle="modal"
                  data-target="#myModal"
                  >新增分类</a
                >
              </td>
            </tr>
          </tfoot>
        </table>
      </div>
    </div>
  </body>
</html>

<!-- 1. 引入地址js文件 -->
<script src="./libs/https.js"></script>

<!-- 6. 引入输入模态框 -->
<div
  class="modal fade"
  id="exampleModal"
  tabindex="-1"
  role="dialog"
  aria-labelledby="exampleModalLabel"
>
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button
          type="button"
          class="close"
          data-dismiss="modal"
          aria-label="Close"
        >
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title" id="exampleModalLabel">New message</h4>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="recipient-name" class="control-label">分类名称</label>
            <input type="text" class="form-control" id="recipient-name" />
          </div>
          <div class="form-group">
            <label for="message-text" class="control-label">分类详情</label>
            <input class="form-control" id="message-text" />
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">
          关闭
        </button>
        <button type="button" class="btn btn-primary" id="add">
          Send message
        </button>
      </div>
    </div>
  </div>
</div>

<!-- 7. 引入确认模态框结构 -->
<div class="modal fade" tabindex="-1" role="dialog" id="myModal2">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button
          type="button"
          class="close"
          data-dismiss="modal"
          aria-label="Close"
        >
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title">温馨提示</h4>
      </div>
      <div class="modal-body2">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">
          确认
        </button>
      </div>
    </div>
  </div>
</div>

<!-- 5. 列表模板引擎结构 -->
<script type="text/html" id="list">
  {{each}}
  <tr>
    <td>{{$value.name}}</td>
    <td>{{$value.slug}}</td>
    <td class="text-center">
      <a href="javascript:void(0)"
         data-toggle="modal"
         class=" btn btn-info btn-xs btn-edit"
         dataid={{$value.id}}>
         编辑
      </a>
      <a href="javascript:void(0)" class="btn btn-danger btn-xs btn-del" dataid={{$value.id}}>
        删除
      </a>
    </td>
  </tr>
  {{/each}}
</script>
<script>
  $(function () {
    // 2. 封装函数，获取文章所有类别，渲染页面
    let id = ''
    function categoryList () {
      $.ajax({
        type: 'get',
        url: BigNew.category_list,
        success: function (backData) {
          // console.log(backData)
          if (backData.code == 200) {
            // 4. 模板引擎
            let data = backData.data
            let htmlStr = template('list', data)
            $('tbody').html(htmlStr)
          }
        }
      })
    }

    // 5. 点击新增,编辑按钮  弹出弹框
    $('table').on('click', '.btn-edit, #xinzengfenlei', function () {
      //   // 5.1 判断是新增还是编辑
      if (
        $(this)
          .text()
          .trim() == '新增分类'
      ) {
        $('#exampleModalLabel').text('新增分类')
        $('#add').text('新增')
      } else {
        $('#exampleModalLabel').text('编辑分类')
        $('#add').text('编辑')
        id = $(this).attr('dataid')
        // 6.4 当为编辑时,把原有数据渲染到模态框
        let name = $(this)
          .parents('td')
          .siblings()
          .eq(0)
          .text()
        let slug = $(this)
          .parents('td')
          .siblings()
          .eq(1)
          .text()
        $('#recipient-name').val(name)
        $('#message-text').val(slug)
      }
      $('#exampleModal').modal()
    })

    // 6. 点击编辑或新增，发送ajax请求
    $('#add').on('click', function () {
      let url = ''
      let name = $('#recipient-name').val()
      let slug = $('#message-text').val()

      // 6.1 判断是新增还是编辑
      if (
        $(this)
          .text()
          .trim() == '新增'
      ) {
        url = BigNew.category_add
      } else {
        url = BigNew.category_edit
      }
      let data = {
        id,
        name,
        slug
      }
      // console.log(data)

      // 6.2 发送ajax请求
      $.ajax({
        type: 'post',
        url: url,
        data: data,
        success: function (backData) {
          // console.log(backData)

          // 6.3 判断是否成功
          if (backData.code == 200 || backData.code == 201) {
            $('#exampleModal').modal('hide')
            $('.modal-body2 p').text(`${backData.msg}`)
            $('#myModal2').modal()
            $('#myModal2').on('hidden.bs.modal', function () {
              categoryList()
            })
          }
        }
      })
    })

    // 7. 点击删除按钮, 发送ajax请求
    $('tbody').on('click', '.btn-del', function (e) {
      id = $(this).attr('dataid')
      // console.log(id)
      $.ajax({
        type: 'post',
        url: BigNew.category_delete,
        data: {
          id
        },
        success: function (backData) {
          // console.log(backData)
          if (backData.code == 204) {
            $('.modal-body2 p').text(`${backData.msg}`)
            $('#myModal2').modal()
            $('#myModal2').on('hidden.bs.modal', function () {
              categoryList()
            })
          }
        }
      })
    })
    // 3. 自调用
    categoryList()
  })
</script>
